
/* 起手样式，先去除浏览器的公共样式，并且设置 border-box ，避免盒子被内边距和边框撑大 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 注意并集选择器中 是有逗号的 */
html,body {
    height: 100%;
}

body {
    background-image: url(../iamge/优雅.png);

    /* 禁止平铺 */
    background-repeat: no-repeat;

    /* 背景尽可能填满 */
    background-size: cover;

    background-position: center center;
}

.nav {
    width: 100%;

    height: 50px;
    background-color:rgba(50,50, 50, 0.4);
    color: white;

    /* 导航栏里面的元素都是水平排列, 弹性布局来设置 */
    display: flex;
    /* 垂直方向子元素居中 */
    align-items: center;
}

/* 设置图片大小 */
.nav img {
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 10px;

    /* 图片变成圆角 把内切圆半径设置为宽度的一半, 就正好是一个圆形*/
    border-radius: 50%;
}

.nav .spacer {
    width: 70%;
}

.nav a {
    /* a标签中的内容，也就是字体变成白色 */
    color: white;
    /* 去掉下划线 */
    text-decoration: none;
    /* 为了让这几个 a 标签不要贴的这么紧凑, 加上个内边距. 
       此处使用外边距也行, 内边距更好. 内边距也是元素的内容, 可以增大用户点击的面积 */
    padding: 0 10px;
}

/* 主体部分 占据的内容 */
.container {
    /* 设置主题部分宽度：1000px */
    width: 900px;
    /* 高度能够填充满整个页面 需要全部的100% 减去 上面导航栏的高度都50px */
    /* 需要用到 calc函数 */
    /* 100%保证窗口放大缩小的时候也是全部的 自适应窗口 */
    height: calc(100% - 50px);

    /* 水平居中 块级元素水平居中 */
    margin: 0 auto;


    display: flex;
    /* 开启弹性布局后，变成水平的了 */
    /* 垂直居中 */
    align-items: center;
    justify-content: space-between;
    /* background-color: #666; */
}

.container-left {
    width: 240px;
    /* 尺寸写 百分数, 是相对于父元素为基准 */
    /* container-left 的父元素就是container  */
    height: 100%;
}

.container-right {
    width: 650px;
    height: 100%;

    background-color: rgba(255,255,255,0.6  );

    /* 加入圆角 */
    border-radius: 5px;


    /* 加上滚动条，属性表示，内容没满，无滚动条，内容满了，自动加上滚动条 */
    overflow: auto;
}

/* 不选择 .container-left 是因为 高度的问题，还需要重新设计*/
/* 选择 .card 背景颜色只会覆盖card的内容，不会和父级元素背景一样高*/
.card {
    background-color: rgba(255,255,255,0.6  );
    /* 圆角矩形 */
    border-radius: 5px;
    /* 设置内边距，让内容和边框有一定的距离 */
    /* 每个方向都是30px */
    padding: 30px; 
}

.card img {
    width: 180px;
    /* height: 180px; */

    border-radius: 50%;
}

.card h3 {
    /* 文字居中 */
    text-align: center;
    padding: 10px;
}

.card .link {

    /* 文字居中 */
    text-align: center;
    /* 但是发现没有居中，a标签是行内元素，把它变成块级元素 */
    display: block;
    /* 设置内容颜色（也就是文字） */
    color: #666;
    /* 去掉下划线 */
    text-decoration: none;
    padding: 10px;
    /* 过渡效果 0.5s */
    /* transition: all 0.5s; */
}
/* 设置悬停交互 */
.card a:hover {
    background-color: orange;
    transition: all 0.5s;
}

.card .counter {
    /* 用到弹性布局 */
    display: flex;
    /* 弹性布局中的规则 */
    justify-content: space-around;
    /* 有两个counter 上下都是5边距，把这两个counter之间就是10px(像素) */
    padding: 5px;
}


